<template>
	<nav class="navbar navbar-fixed-top navbar-default" style="border:0; ">
		<div class="container-fluid" style="padding: 0;" >
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse" id="navbar-collapse">
				<ul class="nav navbar-nav navbar-left">
					<li class="dropdown logo_bg" style="padding: 10px;">
						<img src="../../static/images/logo.png" width="180px">
					</li>
                    <li id="navbar" style="height: 55px;">
                        <h3 style="height: 55px;line-height: 55px;margin-top:0;color:rgba(248,154,55,1)">共派后台管理系统</h3>
                    </li>
				</ul>
				<ul class="nav navbar-nav navbar-right" style="padding-right: 20px;">

					<li><a target="_blank" href="http://www.trc-china.com/">技术支持</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ user ? user.name : '' }}
							<span class="caret" style="padding-right: 0;"></span>
						</a>
						<ul class="dropdown-menu">
							<li><a href="javascript:;" @click="logout">注销登录</a></li>
							<!--<li><a href="#" @click="showModifyPassword(true)">修改密码</a></li>-->
						</ul>
					</li>
				</ul>
			</div><!-- /.navbar-collapse -->
		</div><!-- /.container-fluid -->
	</nav>
</template>

<script>
	import { mapActions, mapState } from 'vuex'
	export default {
		data () {
			return {}
		},
		methods: {
			...mapActions([
				'logout',
				'showModifyPassword'
			])
		},
		watch: {
			/**
			 * 当access_token的state发生变化时
			 * 说明用户登录信息验证成功，并且拿到了access_token
			 *
			 */
			access_token (value) {
				if (!value) {
					this.$router.replace({
						path: '/login'
					})
				}
			}
		},
		computed: {
			...mapState ({
				access_token: state => state.account.access_token,
				user: state => state.account.user,
				showModifyPasswordForm: state => state.account.showModifyPasswordForm
			})
		}
	}

</script>

<style lang="scss">
	#navbar {
		border-radius: 0;
		border-right: none;
		border-left: none;
		margin-bottom: 0;
        padding-left: 20px;
	}
    .navbar{
        background: #ffffff!important;
    }
    .logo_bg{
        background: linear-gradient(left, #f17a47, #f9a317);
        background: -o-linear-gradient(left, #f17a47, #f9a317); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(left, #f17a47, #f9a317); /* Firefox 3.6 - 15 */
        background: -webkit-linear-gradient(left, #f17a47, #f9a317); /* Safari 5.1 - 6.0 */
    }
</style>
